<template>
  <div class="w375 rounded bg-white border">
    <h6 v-text="message.title"></h6>

    <div class="text-muted" v-for="(vo, io) in arr" :key="`${io}wechatpushs2`">
      {{vo.text}}
      <el-popover placement="top" width="340">
        <el-form label-width="50px">
          <el-form-item label="内容">
            <el-input v-model.lazy="temps.data[vo.key].value" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="temps.data[vo.key].color"></el-color-picker>
          </el-form-item>
        </el-form>
        <span
          type="text"
          slot="reference"
          :style="{ color: temps.data[vo.key].color}"
          v-text="temps.data[vo.key].value"
        ></span>
      </el-popover>
    </div>
    <div class="text-info border-top">详情</div>
  </div>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      temps: {},
      arr: []
    };
  },
  props: {
    message: {
      type: Object,
      required: true
    },
    setdata: {
      type: Function,
      required: true
    }
  },
  mounted() {
    const { arr, temps } = this.chang(this.message);
    this.temps = temps;
    this.arr = arr;
  },
  watch: {
    message() {
      const { arr, temps } = this.chang(this.message);
      this.temps = temps;
      this.arr = arr;
    },
    temps: {
      deep: true,
      handler(v) {
        this.setdata(v);
      }
    }
  },
  methods: {
    chang(v) {
      const url = "https://www.hterobot.com";
      const r = new RegExp("\\{{([^}]*)\\.DATA}}");
      const template_id = v.template_id;
      const data = {};
      const arr = v.content.split("\n");
      const arrexample = v.example.split("\n");
      for (let v in arr) {
        const brr = arr[v].match(r);
        const text = arr[v].replace(r, "");
        const value = arrexample[v].replace(text, "");
        data[brr[1]] = {
          value,
          color: "#000000"
        };

        arr[v] = {
          text,
          key: brr[1]
        };
      }
      const temps = {
        url,
        template_id,
        data
      };
      return {
        arr,
        temps
      };
    }
  }
};
</script>

<style scoped>
.w375 {
  width: 375px;
  margin: 10px;
  padding: 10px 5px;
  height: 375px;
}
.text-muted span {
  cursor: pointer;
}
</style>
